<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>好学APP - 学习</title>
    <link rel="stylesheet" href="css/styles.css">
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="ios-device">
        <!-- iOS 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span class="status-bar-time">9:41</span>
            </div>
            <div class="status-bar-right">
                <span class="status-bar-signal"><i class="fas fa-signal"></i></span>
                <span class="status-bar-wifi"><i class="fas fa-wifi"></i></span>
                <span class="status-bar-battery"><i class="fas fa-battery-full"></i></span>
            </div>
        </div>
        
        <!-- 应用内容区域 -->
        <div class="app-content">
            <!-- 顶部导航 -->
            <div style="background-color: var(--card-color); padding: 16px; position: sticky; top: 0; z-index: 10;">
                <div class="flex justify-between items-center">
                    <h1 class="font-bold" style="font-size: 22px;">学习</h1>
                    <div>
                        <button class="btn btn-sm btn-outline mr-2">
                            <i class="fas fa-search"></i>
                        </button>
                        <button class="btn btn-sm btn-outline">
                            <i class="fas fa-filter"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 分类标签 -->
                <div class="flex mt-4 overflow-x-auto" style="padding-bottom: 8px;">
                    <div class="badge badge-primary mr-2" style="white-space: nowrap; padding: 8px 16px;">全部</div>
                    <div class="badge mr-2" style="white-space: nowrap; padding: 8px 16px; background-color: var(--border-color); color: var(--text-secondary);">物理</div>
                    <div class="badge mr-2" style="white-space: nowrap; padding: 8px 16px; background-color: var(--border-color); color: var(--text-secondary);">数学</div>
                    <div class="badge mr-2" style="white-space: nowrap; padding: 8px 16px; background-color: var(--border-color); color: var(--text-secondary);">化学</div>
                    <div class="badge mr-2" style="white-space: nowrap; padding: 8px 16px; background-color: var(--border-color); color: var(--text-secondary);">生物</div>
                    <div class="badge mr-2" style="white-space: nowrap; padding: 8px 16px; background-color: var(--border-color); color: var(--text-secondary);">计算机</div>
                </div>
            </div>
            
            <!-- 进行中的学习 -->
            <div class="p-3">
                <h2 class="font-bold mb-3">进行中的学习</h2>
                
                <div class="card">
                    <div class="flex">
                        <div class="mr-3">
                            <div style="width: 80px; height: 80px; border-radius: 12px; overflow: hidden;">
                                <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80" alt="量子力学" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold mb-1">量子力学基础</h3>
                            <p class="text-secondary mb-2 text-sm">理解波函数与测量的基本概念</p>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 75%;"></div>
                            </div>
                            <div class="flex justify-between mt-1">
                                <span class="text-secondary text-sm">已完成 3/4 章节</span>
                                <span class="text-primary text-sm">75%</span>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between mt-3">
                        <button class="btn btn-sm btn-outline">
                            <i class="fas fa-info-circle mr-1"></i>详情
                        </button>
                        <button class="btn btn-sm btn-primary">
                            <i class="fas fa-play mr-1"></i>继续学习
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 费曼学习法步骤 -->
            <div class="p-3">
                <h2 class="font-bold mb-3">费曼学习法步骤</h2>
                
                <div class="topic-card">
                    <div class="topic-icon">
                        <i class="fas fa-book"></i>
                    </div>
                    <div class="topic-content">
                        <div class="topic-title">第一步：选择主题</div>
                        <div class="topic-progress">选择你想要学习的主题或概念</div>
                    </div>
                    <i class="fas fa-chevron-right text-tertiary"></i>
                </div>
                
                <div class="topic-card">
                    <div class="topic-icon" style="background-color: var(--secondary-color);">
                        <i class="fas fa-pencil-alt"></i>
                    </div>
                    <div class="topic-content">
                        <div class="topic-title">第二步：教给他人</div>
                        <div class="topic-progress">用简单的语言解释给他人听</div>
                    </div>
                    <i class="fas fa-chevron-right text-tertiary"></i>
                </div>
                
                <div class="topic-card">
                    <div class="topic-icon" style="background-color: var(--accent-color);">
                        <i class="fas fa-search"></i>
                    </div>
                    <div class="topic-content">
                        <div class="topic-title">第三步：发现知识盲点</div>
                        <div class="topic-progress">找出你解释不清的地方</div>
                    </div>
                    <i class="fas fa-chevron-right text-tertiary"></i>
                </div>
                
                <div class="topic-card">
                    <div class="topic-icon" style="background-color: var(--success-color);">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <div class="topic-content">
                        <div class="topic-title">第四步：简化与类比</div>
                        <div class="topic-progress">用更简单的方式重新组织知识</div>
                    </div>
                    <i class="fas fa-chevron-right text-tertiary"></i>
                </div>
            </div>
            
            <!-- 推荐课程 -->
            <div class="p-3">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="font-bold">推荐课程</h2>
                    <a href="#" class="text-primary">查看全部</a>
                </div>
                
                <div class="card">
                    <div class="flex">
                        <div class="mr-3">
                            <div style="width: 80px; height: 80px; border-radius: 12px; overflow: hidden;">
                                <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80" alt="微积分" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold mb-1">微积分基础</h3>
                            <p class="text-secondary mb-2 text-sm">从零开始学习微积分的核心概念</p>
                            <div class="flex items-center">
                                <span class="badge badge-primary mr-2">数学</span>
                                <span class="text-secondary text-sm"><i class="far fa-clock mr-1"></i>60分钟</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="flex">
                        <div class="mr-3">
                            <div style="width: 80px; height: 80px; border-radius: 12px; overflow: hidden;">
                                <img src="https://images.unsplash.com/photo-1507413245164-6160d8298b31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80" alt="化学" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold mb-1">有机化学入门</h3>
                            <p class="text-secondary mb-2 text-sm">理解有机分子的结构与反应机理</p>
                            <div class="flex items-center">
                                <span class="badge badge-primary mr-2">化学</span>
                                <span class="text-secondary text-sm"><i class="far fa-clock mr-1"></i>45分钟</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="flex">
                        <div class="mr-3">
                            <div style="width: 80px; height: 80px; border-radius: 12px; overflow: hidden;">
                                <img src="https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1760&q=80" alt="编程" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold mb-1">Python编程基础</h3>
                            <p class="text-secondary mb-2 text-sm">从零开始学习Python编程语言</p>
                            <div class="flex items-center">
                                <span class="badge badge-primary mr-2">计算机</span>
                                <span class="text-secondary text-sm"><i class="far fa-clock mr-1"></i>90分钟</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-item" id="tab-home">
                <div class="tab-icon"><i class="fas fa-home"></i></div>
                <div class="tab-label">首页</div>
            </div>
            <div class="tab-item active" id="tab-learn">
                <div class="tab-icon"><i class="fas fa-book-open"></i></div>
                <div class="tab-label">学习</div>
            </div>
            <div class="tab-item" id="tab-note">
                <div class="tab-icon"><i class="fas fa-edit"></i></div>
                <div class="tab-label">笔记</div>
            </div>
            <div class="tab-item" id="tab-profile">
                <div class="tab-icon"><i class="fas fa-user"></i></div>
                <div class="tab-label">我的</div>
            </div>
            <div class="tab-item" id="tab-settings">
                <div class="tab-icon"><i class="fas fa-cog"></i></div>
                <div class="tab-label">设置</div>
            </div>
        </div>
    </div>
</body>
</html>